<template>
  <div class="box" ref="ceshiRef">
    <a-button type="primary">发发</a-button>
    <div class="ceshi">fhasld</div>
    <a-switch
      v-model:checked="checked"
      checked-children="绿"
      un-checked-children="黄"
      @change="change"
    />
    <div>{{ t(`message.Home`) }}</div>
    <a-button @click="() => changeLocal('zh')">切换中文</a-button>
    <a-button @click="() => changeLocal('en')">切换英语</a-button>
  </div>
</template>
<script setup lang="ts">
import { usePermissioStore } from "@/stores/modules/permission";
import { storeToRefs } from "pinia";
import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
const permissioStore = usePermissioStore();
const checked = ref(false);
const { ceshiRef } = permissioStore;

const { locale, t } = useI18n();
const changeLocal = (type: string) => {
  locale.value = type;
  console.log(t(`message.Home`));
};
// 切换主题回调
const change = (value: boolean) => {
  // 如果开关打开，就切换为绿色主题，否则默认黄色主题
  if (value) {
    toggleTheme({
      scopeName: "theme-green",
    });
    console.log("已切换为绿色主题");
  } else {
    toggleTheme({
      scopeName: "theme-default",
    });
  }
};

const hello = ref("运营管理");
</script>
<style lang="less" scoped>
.ceshi {
  // 对应less 引用
  color: @primary-color;
  font-size: 16px;
  // color: $warning-color;
}
</style>
